import React, { Component } from 'react';
import Header from './Header';
import Footer from './Footer'
import axios from 'axios';
// import { List } from 'antd-mobile';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
      newdetail:{},
      show : true,
      pingLun:[]
    }
  }
  componentDidMount () {
      //获取到详情
      // console.log(this)
      const id=this.props.match.params.id
      axios.get(`http://api.shujuzhihui.cn/api/news/detail`, {params:{
        "appKey": "6c9c8e0c90a3456999b548dc8629ea70",
        "newsId":id
    } }).then((data) => {
        // console.log(data.data.RESULT)
        this.setState({
          newdetail:data.data.RESULT
        })
      })
      //获取新闻的评论
      fetch(`http://106.13.34.4:8080/new/getComment?newsId=${id}`)
        .then(res=>res.json())
        .then(data =>{
          let pingLun = data.data
          // console.log(pingLun)
          // console.log(this.refs.pingLun)
          let str = '';
          if(pingLun) {
            pingLun.reverse().map(value => {
              str+=`<Item wrap >${value.content}<span>评论发布时间：${value.time}</span></Item>`
            })
          }
          this.refs.pingLun.innerHTML = str
        })
      //回到顶部
        var btn = document.getElementById('btn');
        var timer = null;
        var isTop = true;
        //获取页面可视区高度
        var clientHeight = document.querySelector('.DetailContentbox').clientHeight;
        //  console.log(clientHeight)
        //滚动条滚动时触发
        document.querySelector('.DetailContentbox').onscroll = function() {
        //显示回到顶部按钮
          var osTop = document.querySelector('.DetailContentbox').scrollTop || document.querySelector('.DetailContentbox').scrollTop;
          if (osTop > clientHeight) {
            btn.style.display = "block";
          } else {
            btn.style.display = "none";
          };
        //回到顶部过程中用户滚动滚动条，停止定时器
          if (!isTop) {
            clearInterval(timer);
          };
          isTop = false;
        };
        btn.onclick = function() {
          //设置定时器
          timer = setInterval(function(){
            //获取滚动条距离顶部高度
            var osTop = document.querySelector('.DetailContentbox').scrollTop || document.querySelector('.DetailContentbox').scrollTop;
            // console.log('osTop '+osTop);
            var ispeed = Math.floor(-osTop / 7);
            //  console.log('ispeed '+ispeed);
             document.querySelector('.DetailContentbox').scrollTop = document.querySelector('.DetailContentbox').scrollTop = osTop+ispeed;
            //到达顶部，清除定时器
            if (osTop === 0) {
              clearInterval(timer);
            };
            isTop = true;
          },30);
        };
  }
  getPingLun (item) {
    // console.log(item)
    this.refs.pingLun.innerHTML = item
  }
  render () {
    return (
      <div className ="container">
        <Header test={this} />
        <div className= "box Detailbox">
          <div className="DetailContentbox">
            <h1> {this.state.newdetail.title} </h1>
            <div className="pubTime">
              <span>{this.state.newdetail.source}</span>
              <span>{this.state.newdetail.publishTime}</span> 
            </div>
            <div className="detailContent" dangerouslySetInnerHTML={{ __html: this.state.newdetail.content}}></div>
            <div id="btn" className="iconfont icon-shangla"></div>
            <div className="pingLun">
              <h2> 热门评论 </h2>
              <div ref="pingLun">
              </div>
              {/* { message } */}
            </div>
          </div>
          <Footer getValtoF={this} getPingLun = { this.getPingLun.bind(this)}/>
        </div>
        
      </div>
    )
  }
}
export default Com